<template>
  <SuperTable
    ref="superTableRef"
    search
    pager
    border
    align="center"
    header-title="客户端升级管理"
    :columns="columns"
    :data-request="fetchData"
    :export-config="{}"
    @checkbox-change="checkboxChangeFn"
    @checkbox-all="checkboxChangeFn"
  >
    <template #action>
      <Button type="primary" @click="showModalFn('新增')">新版本配置</Button>
    </template>
  </SuperTable>

  <CumEditModal v-model:show-modal="state.showModal" :data="state.currentData" :title="state.currentTitle" @edit-modal-ok="refreshTableFn" />
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import CumEditModal from '@/modules/platform-management/pages/client-upgrade-management/components/cum-edit-modal.vue';
import { VxeGridPropTypes } from 'vxe-table';
import type { TableColumnItem } from './columns';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { message } from 'ant-design-vue';
import { upgradeDelete, upgradeQuery } from '../../api/index';
import MQTT from '@/framework/utils/mqtt';

/**
 * data
 */
const state = reactive({
  currentTitle: '',
  showModal: false,
  currentData: {},
  checkedList: [],
});

/**
 * fn
 */
const showModalFn = (params: string) => {
  if (params === '新增') {
    state.currentData = {};
  }
  state.currentTitle = params;
  state.showModal = true;
};

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '发布',
        onClick: () => {
          let params = {
            id: row.id,
            version: row.version,
            url: row.url,
            note: row.note,
            createTime: row.createTime,
          };
          MQTT.publish('bims/' + row.type + '/share/upgrade', JSON.stringify(params));
          message.success('发布成功');
        },
      },
      {
        label: '修改',
        onClick: () => {
          state.currentData = row;
          showModalFn('修改');
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: `确认要删除该版本？`,
          onConfirm: async () => {
            await upgradeDelete(row.id);
            message.success('操作成功！');
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'version',
        order: 'desc',
      },
    ],
    ...data,
  };
  let res = await upgradeQuery(params);
  return res.result;
  // return {
  //   data: [{}, {}, {}],
  //   pageIndex: 1,
  //   pageSize: 10,
  //   total: 100,
  // };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
const checkboxChangeFn = ({ records }) => {
  state.checkedList = records;
};
</script>

<style scoped lang="less"></style>
